<template>
	<view class="pap-tabbar">
		<u-tabbar :value="tabbarIndex * 1" :fixed="false" :placeholder="false" :safeAreaInsetBottom="true">
			<u-tabbar-item :text="item.text" v-for="item in tabs" :key="item.id" @click="handleClick(item)">
				<image class="u-page__item__slot-icon" slot="active-icon" :src="item.selectedIconPath"></image>
				<image class="u-page__item__slot-icon" slot="inactive-icon" :src="item.iconPath"></image>
			</u-tabbar-item>
		</u-tabbar>
	</view>

</template>

<script>
	export default {
		props: {
			tabIndex: {
				type: String,
				default: '0'
			}
		},
		data() {
			return {
				tabbarIndex: this.tabIndex,
				tabs: [{
						id: '0',
						text: '首页',
						iconPath: '/static/images/icon_tab01.png',
						selectedIconPath: '/static/images/icon_tab01_HL.png',
						url: '/pages/index/index'
					},
					{
						id: '1',
						text: '菜单',
						iconPath: '/static/images/icon_tab02.png',
						selectedIconPath: '/static/images/icon_tab02_HL.png',
						url: '/pages/navigation/index'
					},
					{
						id: '2',
						text: '我的',
						iconPath: '/static/images/icon_tab03.png',
						selectedIconPath: '/static/images/icon_tab03_HL.png',
						url: '/pages/mine/index'
					}
				]
			}
		},
		methods: {
			handleClick(item) {
				if (item.id === this.tabIndex) return
				uni.redirectTo({
					url: item.url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.u-page__item__slot-icon {
		width: 30rpx;
		height: 30rpx;
	}

	.pap-tabbar {
		padding-bottom: env(safe-area-inset-bottom);
		background: white;
	}
</style>